<template>
    <div class="pay-style-box">
        <div class="pay-style-item" v-if="type==1">
            <img src="@/assets/img/wechat-icon.png" alt="">
            <div class="pay-word">
                <p class="pay-style-title">微信支付</p>
                <span>推荐安装微信5.0及以上版本的用户使用</span>
            </div>
            <span :class="{'check-icon': true,'checked':pay[1].isRem == true}" @click="chiocePay(1, $event)"></span>
            <!-- <span class="no-enough" v-if="!pay[1].isEnough">余额不足</span>             -->
        </div>
        <div class="pay-style-item" v-if="type==0">
            <img src="@/assets/img/pay-style-1.png" alt="">
            <div class="pay-word">
                <p class="pay-style-title">预付金支付</p>
                <span>剩余：{{balance}}元</span>
            </div>
            <span :class="{'check-icon': true,'checked': pay[0].isRem == true}" @click="chiocePay(0, $event)"></span>
            <!-- <span class="no-enough" v-if="!pay[0].isEnough">余额不足</span>             -->
        </div>
        <div class="pay-style-item" v-if="type==2">
            <img src="@/assets/img/pay-style-1.png" alt="">
            <div class="pay-word">
                <p class="pay-style-title">余额支付</p>
                <span>剩余：{{balance}}元</span>
            </div>
            <span :class="{'check-icon': true,'checked': pay[2].isRem == true}" @click="chiocePay(2, $event)"></span>
            <!-- <span class="no-enough" v-if="!pay[2].isEnough">余额不足</span>             -->
        </div>
    </div>
</template>
<script>
    import market from '@/api/market.js'
    export default {
        props: ['pay', 'balance', 'type'],
        data () {
            return {
                isAgent: localStorage.getItem('dongHang_data') ? true : false,
                uid: localStorage.getItem('dongHang_common_user') ? JSON.parse(localStorage.getItem('dongHang_common_user')).uid : false,
                money: 0
            }
        },
        watch: {
            pay (cur, old) {
                this.pay = cur
            }
        },
        methods: {
            chiocePay (index, e) {
                this.$emit('changePay', index)
            }
        }
    }
</script>
<style lang="less" scoped>
    .pay-style-item {
        height: 1.18rem;
        color: #0a0a0a;
        border-bottom: 1px solid #ccc;
        padding: 0 0.3rem;
        box-sizing: border-box;
        img {
            width: 0.6rem;
            float: left;
            padding-top: 0.3rem;
        }
        .pay-word {
            font-size: 0.24rem;
            float: left;
            margin-left: 0.2rem;
            color: #0a0a0a;
            padding-top: 0.2rem;
            .pay-style-title {
                font-size: 0.3rem;
                font-weight: bolder;
            }
        }
        .no-enough {
            float: right;
            color: #ff2d41;
            font-size: 0.28rem;
            margin-top: 0.35rem;
            margin-right: 0.2rem;            
        }
        .check-icon {
            margin-top: 0.4rem;
            float: right;
            width: 0.30rem;
            height: 0.30rem;
            margin-right: 0.1rem;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 0.3rem;
        }
        .checked {
            background-size: contain;
            border: 1px solid #29abae;
            background-color: #29abae;
            background-image: url(../../assets/img/check-icon.png)
        }
    }
</style>